<template>
  <div>
    <div class="buttons">
      <el-cascader
        placeholder="区域"
        :options="options"
        @active-item-change="handleItemChange"
        v-model="cityId"
        clearable
        :props="props"
      ></el-cascader>
      <el-select
        placeholder="二级商家"
        :disabled="cityId.length!==2"
        @visible-change="change"
        clearable
        v-model="id">
        <el-option
          key="index"
          v-for="(item,index) in options1"
          :label="item.busName"
          :value="item.id">
        </el-option>
      </el-select>
      <el-input placeholder="订单编号" style="width:220px"
                v-model="orderCode"></el-input>
      <el-button type="primary" @click="getOrder">查询</el-button>
      <el-button type="primary" @click="clear">清空</el-button>
      <el-button type="primary" @click="exporter">导出</el-button>
    </div>
    <VTable
      v-if="tableData.code!==405"
      :tableData="tableData.data"
      :tableHeader="tableHeader"
      :tableHandle="tableHandle"
      :tableHandle1="''"
      :tableHandle2="''"
      :tableSort="tableSort"
      v-loading="listLoading">
    </VTable>
    <div class="page-wrap" v-if="tableData.data">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="tableData.data.size"
        layout="total, prev, pager, next, jumper"
        :total="tableData.data.total">
      </el-pagination>
    </div>
    <VForm v-if="dialogVisible" moduleName="finish">
      <template v-if="dialogModle==='item'">
        <Item :orderId="orderId"></Item>
      </template>
    </VForm>
  </div>
</template>
<script>
  import VTable from '../../components/VTable.vue'
  import VForm from '../../components/VForm.vue'
  import Item from '../../view/order/ItemList.vue'
  var moment = require('moment')
  import {mapState, mapGetters} from 'vuex'
  import * as types from '../../store/mutations-type'
  import api from '../../store/api'
  import axios from 'axios'
  var format = require('../../util/util')
  export default {
    data () {
      return {
        orderCode: '',
        currentPage: 1,
        limit: 20,
        status: true,
        listLoading: false,
        id: '',
        orderId: '',
        dialogModle: '',
        value: '',
        tableHeader: [
          {prop: 'orderCode', label: '订单编号'},
          {prop: 'busName', label: '商家名称', width: 140},
          {prop: 'coName', label: '商家公司'},
          {prop: 'orderStatus', label: '订单状态', formatter: this.formatterOrder},
          {prop: 'netPay', label: '实付金额(元)'},
          {prop: 'payStatus', label: '支付状态', formatter: this.formatterStatus},
          {prop: 'userName', label: '收货人账号'},
          {prop: 'consignee', label: '收货人姓名'},
          {prop: 'mobile', label: '收货人电话'},
          {prop: 'address', label: '收货地址'},
          {prop: 'createTime', label: '创建时间', width: 180, formatter: this.formatterCteatetime}
        ],
        tableHandle: [
          {
            text: '商品详情', event: (...params) => this.show(...params)
          }],
        cityId: [],
        cityName: '',
        busName: [],
        flag: {
          a: '',
          b: ''
        },
        options: [{
          value: '28',
          label: '甘肃'
        }],
        props: {
          value: 'id',
          label: 'cityName'
        },
        options1: []
      }
    },
    components: {
      VTable,
      Item,
      VForm
    },
    methods: {
      show (index, obj) {
        this.dialogModle = 'item'
        this.orderId = obj.id
        this.$store.dispatch(types.FINISH_SHOW_FORM)
      },
      exporter () {
        let para = {
          orderCode: this.orderCode,
          cityId: this.cityId[1],
          busName: this.id
        }
        if (!this.orderCode) {
          delete para.orderCode
        }
        if (!this.cityId[1]) {
          delete para.cityId
        }
        if (!this.id) {
          delete para.busName
        }
        para = format.formatString(para)
        window.location.href = api.finExport + '?' + para
      },
      /**
       * 时间格式化
       * @param row
       * @returns {string}
       */
      formatterCteatetime (row) {
        return moment(new Date(row.createTime)).format('YYYY-MM-DD hh:mm:ss')
      },
      /**
       * 订单状态转义
       * @param row
       * @returns {string}
       */
      formatterOrder (row) {
        return row.orderStatus === 10 ? '待付款' : row.orderStatus === 20 ? '待卖家发货' : row.orderStatus === 30 ? '待确认收货' : row.orderStatus === 40 ? '交易成功' : row.orderStatus === 50 ? '交易关闭' : '未知'
      },
      /**
       * 支付状态转义
       * @param row
       * @returns {string}
       */
      formatterStatus (row) {
        return row.payStatus === false ? '未支付' : row.payStatus === true ? '已支付' : '未知'
      },
      /**
       * 每页条数
       * @param val
       */
      handleSizeChange (val) {
        console.log(`每页 ${val} 条`)
      },
      /**
       * 翻页
       * @param val
       */
      handleCurrentChange (val) {
        this.currentPage = val
        this.getOrder()
      },
      getTableData () {
        this.$store.dispatch(types.FINISH_REQ_LIST, '?pageIndex=' + this.currentPage + '&pageSize=' + this.limit + '')
      },
      /**
       * 列表排序
       * @param column
       * @param prop
       * @param order
       */
      tableSort (column, prop, order) {
      },
      /**
       * 根据id查询数据
       */
      getOrder () {
        let para = {
          pageIndex: this.currentPage,
          pageSize: this.limit,
          orderCode: this.orderCode,
          district: this.cityId[1],
          busId: this.id
        }
        if (!this.orderCode) {
          delete para.orderCode
        }
        if (!this.cityId[1]) {
          delete para.district
        }
        if (!this.id) {
          delete para.busId
        }
        para = format.formatString(para)
        this.$store.dispatch(types.FINISH_REQ_LIST, '?' + para)
      },
      clear () {
        this.cityId = []
        this.id = ''
        this.orderCode = ''
        this.getTableData()
      },
      handleItemChange (val) {
        var len = val.length - 1
        if (val.length === 1) {
          this.options.map((item, index) => {
            if (item.id === val[len]) {
              this.flag.a = index
              return
            }
          })
          this.getCityLib(val[len])
            .then(result => {
              this.options[this.flag.a].children = result
            })
        }
      },
      getCityLib (id) {
        let url = api.cityLib
        url = id ? url + '?parentId=' + id : url
        return new Promise((resolve, reject) => {
          axios.get(url)
            .then(response => {
              const result = response.data
              if (result.success) {
                resolve(result.data)
              } else {
                reject(result)
              }
            })
        })
      },
      change () {
        axios.get(api.supplierByCity + '?cityId=' + this.cityId[1])
          .then(response => {
            const _result = response.data
            if (_result.success) {
              this.options1 = _result.data
            } else {
            }
          })
      }
    },
    updated () {
      if (this.tableData.code === 405) {
        this.$message.error({
          title: '错误',
          message: this.tableData.message
        })
      }
    },
    computed: {
      ...mapState({
        dialogVisible: state => state.finish.dialogVisible,
        checkNum: state => state.finish.checkNum
      }),
      ...mapGetters({
        tableData: 'finish_tableData'
      })
    },
    mounted () {
      this.getTableData()
      this.getCityLib()
        .then(result => {
          this.options = result
        })
    }
  }
</script>
